<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="!form.id ? $t('add') : $t('update')"
    :visible.sync="visible"
  >
    <el-form
      :model="form"
      :rules="dataRule"
      label-width="120px"
      ref="dataForm"
      v-loading="loading"
    >
      <el-form-item
        label="城市名称"
        prop="name">
        <el-input
          placeholder="城市名称"
          v-model="form.name"/>
      </el-form-item>
      <el-form-item
        label="城市图片"
        prop="background">
        <el-upload
          :file-list="imgFileList"
          :limit="1"
          :multiple="false"
          :on-exceed="handleImgFileExceed"
          :on-preview="onImgPreview"
          :on-remove="onImgRemoved"
          :on-success="onImgUploadSuccess"
          accept="image/png, image/jpeg"
          action="http://47.106.93.196:8200/cloud-menu/midea/menu/file/upload"
          list-type="picture-card"
        >
          <i class="el-icon-plus"/>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="排序"
        prop="sort">
        <el-input
          placeholder="排序"
          v-model="form.sort"
          disabled/>
      </el-form-item>
    </el-form>

    <template slot="footer">
      <el-button
        :loading="requesting"
        @click="visible = false">{{
          $t("cancel")
        }}</el-button>
      <el-button
        :loading="requesting"
        @click="dataFormSubmitHandle()"
        type="primary"
      >{{ $t("confirm") }}
      </el-button>
    </template>

    <el-dialog
      :append-to-body="true"
      :visible.sync="previewDialogVisible">
      <img
        :src="previewImgUrl"
        alt=""
        width="100%" >
    </el-dialog>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
export default {
  name: 'CityAddOrUpdate',
  mixins: [mixinViewModule],
  data () {
    return {
      visible: false,
      loading: false,
      requesting: false,
      imgFileList: [],
      previewImgUrl: '',
      previewDialogVisible: false,
      mixinViewModuleOptions: {
        // isGourmetMap: true,
        // getDataListURL: '/midea/menu/foodmap/foodstorys/allmenus',
        // getDataListIsPage: true,
        // deleteURL: '/midea/menu/foodmap/foodstorys/del/',
        // deleteIsBatch: true
      },
      form: {
        background: '', // 背景图
        describ: '', // 描述
        ext: '',
        flag: 0,
        id: '',
        name: '', // 名称
        sort: 0 // 顺序
      }
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        background: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    init () {
      this.$refs['dataForm'] && this.$refs['dataForm'].resetFields()
      this.visible = true

      this.$nextTick(() => {
        this.imgFileList = []
        if (this.form.id && this.form.id.length > 0) {
          // this.getInfo()

          if (this.form.background && this.form.background.length > 0) {
            this.imgFileList = [
              { name: this.form.background, url: this.form.background }
            ]
          }
        }
      })
    },

    handleImgFileExceed (files, fileList) {
      this.$message.warning(`只能设置一张图片哦`)
    },

    onImgPreview () {
      this.previewImgUrl = this.form.background
      this.previewDialogVisible = true
    },
    onImgRemoved () {
      this.form.background = ''
    },
    onImgUploadSuccess (response) {
      if (response.code !== 200) {
        this.form.background = ''
        return
      }
      this.form.background = response.data
    },
    dataFormSubmitHandle () {
      this.$refs['dataForm'].validate(valid => {
        if (!valid) {
          return false
        }
        if (this.requesting) {
          return
        }
        let params = {
          ...this.form
          // status: this.form.status ? 1 : 0
        }

        this.requesting = true
        this.$http
          .post(
            `${this.mikeNetworkBase}midea/menu/foodmap/common/citys/save`,
            params
          )
          .then(({ data: res }) => {
            if (res.code !== 200) {
              return this.$message.error(res.msg)
            }
            this.$message({
              message: this.$t('prompt.success'),
              type: 'success',
              duration: 500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          })
          .catch(() => {})
          .finally(() => {
            this.requesting = false
          })
      })
    }
  }
}
</script>

<style scoped></style>
